<template>
  <div class="manager-container">
    <!-- 头 -->
    <div class="manager-header">
      <div class="manager-header-left">
        <img src="@/assets/img/logo1.jpg" alt="" />
        <div class="title">管理系统</div>
      </div>
      <div class="manager-header-center">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/manager/home' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item> {{router.currentRoute.value.meta.name}} </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="manager-header-right">
        <el-dropdown style="cursor: pointer;">
          <div style="margin-right: 20px; display: flex; align-items: center;">
            <img style="width: 40px; height: 40px; border-radius: 50%;" :src=data.user.avatar mode="scaleToFill" />
            <span style="margin-left: 5px; color: white;">{{data.user.name}}<el-icon><arrow-down /></el-icon></span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/manager/person')">个人资料</el-dropdown-item>
              <el-dropdown-item @click="router.push('/manager/password')">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 主体 -->
    <div class="manager-main">
      <!-- 左侧菜单 有子集的就是el-sub-menu 没有子集的就是el-menu-item -->
      <div class="manager-main-left">
        <el-menu :default-active="router.currentRoute.value.path"
                 :default-openeds="['1', '2']"
                 router
        >
          <el-menu-item index="/manager/home">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-menu-item index="/manager/notice">
            <el-icon><ChatLineRound /></el-icon>
            <span>公告栏</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>信息管理</span>
            </template>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!-- 右侧主体 -->
      <div class="manager-main-right">
        <!-- RouterView是一个组件，用于显示当前路由匹配到的组件 -->
        <RouterView @updateUser="updateUser" />
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import { ElMessage } from "element-plus";
import { reactive } from "vue";

// 存储用户数据
const data = reactive({
  user:JSON.parse(localStorage.getItem('xm-user') || '{}') 
})

const logout=()=>{
  router.push('/login')
  // 退出登录清除缓存
  localStorage.removeItem('xm-user')
}

// 更新用户数据
const updateUser = () =>{
  data.user=JSON.parse(localStorage.getItem('xm-user'))
}

// 如果没有用户id就跳转回登录页
if(!data.user.id){
  logout()
  ElMessage.error('请先登录')
}
</script>

<style scoped>
@import "@/assets/css/manager.css";

</style>
